<template>
  <div id="recommend" >
    <img :src="img" alt="图片加载失败" id>
    <p>{{title}}</p>
    <p>{{introduction}}</p>
  </div>
</template>
<script lang='ts'>
export default {
    props:{
      img:{
        type:String,
        //应该放一个网站的url
        default:()=>''
      },
      title:{
        type:String,
        default:()=>`无标题${new Date().toString}`
      },
      introduction:{
        type:String,
        default:()=>'暂无简介'
      }
    }
}
</script>
<style scoped lang="less">
  #recommend{
    width: 40vw;
    height: 40vw;
    border: 1px solid gray;
    border-radius: 20px;
    box-shadow: .3vw .3vw .2vw lightgray;

    &:hover{
      transform: translateY(-.3vh);
      box-shadow: 0vw 0vw 1vw lightgray;
    }
  }
</style>